<template>
	<!-- 发布需求 -->
	<view class="box">
		<u-form :model="form" ref="uForm">
			<u-form-item label="标题" prop="title" label-width="200"><u-input v-model="form.title" /></u-form-item>
			<u-form-item label="面积" prop="mianji" label-width="200"><u-input v-model="mianji"
					type="number" /></u-form-item>
			<u-form-item label="单价" prop="price" label-width="200"><u-input v-model="price"
					type="number" /></u-form-item>
			<u-form-item label="共计费用" prop="money" label-width="200"><u-input v-model="form.money"
					disabled /></u-form-item>
			<u-form-item label="定金" prop="ding_money" label-width="200"><u-input
					v-model="form.ding_money" /></u-form-item>
			<u-form-item label="尾款" prop="wei_money" label-width="200"><u-input
					v-model="form.wei_money" /></u-form-item>
			<u-form-item label="耕作要求" prop="yaoqiu" label-width="200"><u-input v-model="form.yaoqiu"
					type="textarea" /></u-form-item>
			<u-form-item label="联系方式" prop="phone" label-width="200"><u-input v-model="form.phone" /></u-form-item>
			<u-form-item label="分类" prop="type" label-width="200"><u-input v-model="form.types" disabled
					@click="show=true" />
				<u-select v-model="show" :list="list" @confirm="confirm"></u-select>
				<!-- <u-picker v-model="show" :columns="columns"></u-picker> -->
			</u-form-item>
			<u-form-item label="地址" prop="address" label-width="200"><u-input v-model="form.address" disabled
					@click="selectMap" /></u-form-item>
		</u-form>
		<button class="submitBtn" @click="submit">提交</button>
		<!-- 登录提示 -->
		<shopro-auth-modal></shopro-auth-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				token: uni.getStorageSync('token'),
				form: {
					title: '',
					mianji: '0',
					price: "0",
					money: "",
					ding_money: "",
					wei_money: "",
					yaoqiu: '',
					phone: '',
					address: '',
					types: '',
				},
				show: false,
				list: [{
						value: '1',
						label: '耕地'
					},
					{
						value: '2',
						label: '播种'
					},
					{
						value: '3',
						label: '飞防'
					},
					{
						value: '4',
						label: '收割'
					},
					{
						value: '5',
						label: '其他'
					}
				],
				rules: {
					title: [{
						required: true,
						message: '请输入标题',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					mianji: [{
						type: 'number',
						min: 0.1,
						message: '面积不小于0.1',
						trigger: 'change'
					}],
					price: [{
						type: 'number',
						min: 0.1,
						message: '单价不小于0.1',
						trigger: 'change'
					}],
					ding_money: [{
						type: 'number',
						min: 0.1,
						message: '定金不小于0.1',
						trigger: 'change'
					}],
					wei_money: [{
						type: 'number',
						min: 0.1,
						message: '尾款不小于0.1',
						trigger: 'change'
					}],
					yaoqiu: [{
						required: true,
						message: '请输入要求',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					address: [{
						required: true,
						message: '请选择地址',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}]

				},
				mianji: 0,
				price: 0,
			}
		},
		watch: {
			price() {
				this.form.price = this.price;
				this.form.money = parseFloat(this.form.price) * parseFloat(this.form.mianji);
			},
			mianji() {
				this.form.mianji = this.mianji;
				this.form.money = parseFloat(this.form.price) * parseFloat(this.form.mianji);
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			// 回调参数为包含多个元素的数组，每个元素分别反应每一列的选择情况
			confirm(e) {
				console.log(e[0].label);
				this.form.types=e[0].label
			},
			//提交
			submit() {
				var _this = this;
				this.$refs.uForm.validate(valid => {
					if (valid) {
						_this.$http('apply.fabuXuqiuSubmit', _this.form).then(res => {
							if (res.code == 1) {
								uni.showToast({
									title: '提交成功',
									icon: 'none',
									success() {
										uni.redirectTo({
											url: "/pages/index/xuqiu"
										})
									}
								})
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none',
								})
							}
						})
					} else {
						console.log(valid);
					}
				})

			},
			//选择位置
			selectMap() {
				var that = this;
				uni.chooseLocation({
					success(ret) {
						// that.positionInfo.longitude = ret.longitude;
						// that.positionInfo.latitude = ret.latitude;
						// that.positionInfo.address = ret.address;
						// that.positionInfo.name=ret.name;
						that.form.address = ret.address + ret.name;
					}
				})
			}

		}
	}
</script>

<style>
	page {

		background-color: #fff;
	}

	.box {
		width: 90%;
		margin: 30rpx auto;
	}

	.submitBtn {
		width: 90%;
		background-color: rgb(75, 187, 137);
		color: #fff;
	}
</style>